<template>
    <div class="distortion-evaluator">
        <select v-model="selected" class="distortion-select">
            <option disabled value="">请选择影响增强算法</option>
            <option v-for="type in distortionTypes" :key="type">{{ type }}</option>
        </select>

        <!-- 列表过渡：先淡出再淡入 -->
        <transition name="list" mode="out-in">
            <div class="button-list" :key="selected">
                <button v-for="algo in algorithms[selected] || []" :key="algo"
                    :class="['algo-button', { selected: algo === selectedAlgo }]" @click="handleClick(algo)">
                    {{ algo }}
                </button>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'DistortionEvaluator2',
    data() {
        return {
            selected: '',
            selectedAlgo: '',
            distortionTypes: [
                '噪声自动消除',
                '超分辨率重构',
                '对比度增强'
            ],
            algorithms: {
                '噪声自动消除': ['噪声自动消除算法1', '噪声自动消除算法2', '噪声自动消除算法3', '噪声自动消除算法4'],
                '超分辨率重构': ['超分辨率重构算法1', '超分辨率重构算法2', '超分辨率重构算法3', '超分辨率重构算法4'],
                '对比度增强': ['对比度增强算法1', '对比度增强算法2', '对比度增强算法3', '对比度增强算法4'],
            }
        };
    },
    methods: {
        handleClick(algo) {
            this.selectedAlgo = algo;     // 记录当前选中算法
            this.$emit('evaluate', algo); // 向外抛事件
        }
    }
};
</script>

<style scoped>
.distortion-evaluator {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* 动态渐变动画 */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 下拉框样式 */
.distortion-select {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(45deg, #2af598, #009efd);
    background-size: 200% 200%;
    animation: gradientBG 8s ease infinite;
    color: #36e1db;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px #2af598, 0 0 20px #009efd;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
}

.distortion-select:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #2af598, 0 0 30px #009efd;
}

/* 列表过渡 */
.list-enter-active,
.list-leave-active {
    transition: opacity 0.5s;
}

.list-enter,
.list-leave-to {
    opacity: 0;
}

/* 按钮列表容器 */
.button-list {
    margin-top: 24px;
}

/* 算法按钮 */
.algo-button {
    display: block;
    width: 100%;
    margin: 12px 0;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #f7f7f7;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
    background-size: 300% 300%;
    animation: gradientBG 6s ease infinite;
    border: none;
    border-radius: 10px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6),
        0 0 20px rgba(204, 93, 232, 0.6);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.algo-button:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.8),
        0 0 30px rgba(204, 93, 232, 0.8);
}

/* 选中态发光效果 */
.algo-button.selected {
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px #ffffff,
        0 0 30px rgba(204, 93, 232, 1);
}
</style>